import React, { useState } from 'react';

const App = () => {
  const [name, setName] = useState('');
  const [list, setList] = useState([
    { id: 1, name: '吃饭' },
    { id: 2, name: '睡觉' },
  ]);

  return (
    <div>
      <h1>todo</h1>
      <input
        type="text"
        placeholder="待办事项"
        value={name}
        onChange={(evt) => setName(evt.target.value)}
      />
      <button
        type="button"
        onClick={() => {
          if (name) {
            setList([...list, { name, id: Date.now() }]);
            setName('');
          }
        }}
      >
        add
      </button>
      <ul>
        {list.map((item, index) => (
          <li key={item.id}>
            <span>{item.name}</span>
            <button
              type="button"
              onClick={() => setList(list.filter((e, i) => i !== index))}
            >
              del
            </button>
          </li>
        ))}
      </ul>
      {list.length === 0 && <p>暂无待办事项</p>}
    </div>
  );
};

export default App;
